<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>修改密码--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
    <link href="/resource/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/resource/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="/resource/css/table.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: #ecf0f5;font-family: 楷体;color: #475059;overflow: auto">
<div class="notice_main ">
    <div class="notice_check" style="padding: 16px 15px 8px 15px">
        <p>
            <label class="">用户名：</label>
            <input type="text" id="userName" class="find_input">
            <label class="">手机号：</label>
            <input type="text" id="iphone" class="find_input">
            <label class="">状态：</label>
            <select id="status" class="find_input">
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
            <button class="check_btn" id="search">查询</button>
            <!--  <button class="check_btn" id="revocation">回撤</button>-->
        </p>
    </div>
    <div class="notice_check  notice_check_last">
        <div class="notice_nav r_right">
            <a class="btn btn-default" onclick="addUser()"><span class="glyphicon glyphicon-plus"></span>新增</a>
            <a class="btn btn-default" onclick="delUsers()"><span class="glyphicon glyphicon-remove"></span>删除</a>
        </div>
        <div class="clear"></div>
    </div>
    <table id="userTables" lay-filter="userTables"></table>
</div>
<script type="text/html" id="operate">
    <a class="toolbarMy" lay-event="edit">编辑</a>
    <a class="toolbarMy" lay-event="del">删除</a>
    {{#  if(d.status=='启用'){ }}
    <a class="toolbarMy" lay-event="forbidden">禁用</a>
    {{#  } else if(d.status=='禁用'){ }}
    <a class="toolbarMy" lay-event="startUsing">启用</a>
    {{#  } }}
</script>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript">

    var addUser;
    var delUsers;
    layui.use(['table', 'layer', 'laydate', 'form'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            form = layui.form;
        var tableIns = table.render({
            elem: '#userTables'
            , url: '/user/user.do' //数据接口
            , method: 'get'
            , page: true //开启分页
            , id: 'tableId'
            , where: {
                status: 1
            }
            , limits: [10, 15, 30]
            , limit: 15
            , cols: [
                [ //表头
                    {'type': 'checkbox', 'fixed': 'left'}
                    , {field: 'index', title: '序号'}
                    , {field: 'userName', title: '用户名'}
                    , {field: 'sex', title: '性别'}
                    , {field: 'iphone', title: '手机号'}
                    , {field: 'email', title: '电子邮件'}
                    , {field: 'address', title: '联系地址'}
                    , {field: 'createdDate', title: '创建时间'}
                    , {field: 'updateDate', title: '最后一次登录时间'}
                    , {field: 'status', title: '状态'}
                    , {title: '操作', toolbar: '#operate', 'fixed': 'right'}
                ]
            ]
        });
        //搜索
        $('#search').on('click', function () {
            console.log("搜索执行")
            tableReload();
        });
        //撤销
        $("#revocation").on('click', function () {
            $("#userName").val('');
            $("#iphone").val('');
            tableReload();
        });
        addUser = function () {
            layer.open({
                type: 2,
                title: "新增用户",
                shadeClose: false, //点击遮罩关闭层
                area: ['700px', '478px'],
                content: "/user/addUserHouser.do"
            });
        }
        delUsers = function () {
            var datas = table.checkStatus("tableId").data;
            console.log(datas)
            if (datas.length == 0) {
                layer.alert("请选择数据后再进行操作！");
            } else {
                var ids = new Array();
                for (d in datas) {
                    ids.push(datas[d].id);
                }
                delUser(ids.toString());
            }
        }
        //监听工具条
        table.on('tool(userTables)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'details') {
                //查看详情
            } else if (obj.event === 'del') {
                //删除
                delUser(data.id);
            } else if (obj.event === 'startUsing') {
                //启用用户
                editStatus(data.id, 1)
            } else if (obj.event === "forbidden") {
                //禁用用户
                editStatus(data.id, 0)
            } else if (obj.event === "edit") {
                //修改用户
                layer.open({
                    type: 2,
                    title: "修改用户",
                    shadeClose: false, //点击遮罩关闭层
                    area: ['700px', '478px'],
                    content: "/user/editUserHouser.do?id=" + data.id
                });
            }
        });

        function tableReload() {
            var userName = $("#userName").val();
            var iphone = $("#iphone").val();
            var status = $("#status").val()
            console.log(status + iphone);
            //执行重载
            table.reload('tableId', {
                url: '/user/user.do'
                , method: 'get'
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    userName: userName,
                    status: status,
                    iphone: iphone,
                }
            });
        }

        //删除用户函数
        function delUser(ids) {
            layer.confirm('是否删除?', function (index) {
                $.ajax({
                    url: "/user/user.do",
                    type: "post",
                    data: {_method: "DELETE", "ids": ids},
                    dataType: "json",
                    success: function (result) {
                        if (!result.status) {
                            layer.msg(result.msg, {time: 2000});
                            return false;
                        }
                        layer.msg("删除成功!", {time: 1000});
                        active.reload();
                    }
                });
                layer.close(index);
            })
        }

        active = {
            reload: function () {
                var userName = $("#userName").val();
                var iphone = $("#iphone").val();
                var status = $("#status").val()
                console.log(status + iphone);
                //执行重载
                table.reload('tableId', {
                    url: '/user/user.do'
                    , method: 'get'
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        userName: userName,
                        status: status,
                        iphone: iphone,
                    }
                });
            }
        };

        //更改用户状态函数
        function editStatus(id, status) {
            layer.confirm('确认更改用户状态?', function (index) {
                $.ajax({
                    url: "/user/status.do",
                    type: "post",
                    data: {"id": id, "status": status},
                    dataType: "json",
                    success: function (result) {
                        if (!result.status) {
                            layer.msg(result.msg, {time: 2000});
                            return false;
                        }
                        layer.msg("更改成功!", {time: 1000});
                        active.reload();
                    }
                });
                layer.close(index);
            })
        }
    });
</script>

</body>
</html>